<template>
  <div class="mine">
    <div class="zhanghao">
      <div class="space"></div>
      <div class="top">
        <van-image
          round
          width="6rem"
          height="6rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="name">
        <div class="one">hzzzzz<van-icon name="diamond-o" color="blue" /></div>
        <div class="two">ID:1</div>
      </div>
      <div class="set">
        <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
          <template #reference>
            <van-icon name="setting-o" size="25" />
          </template>
        </van-popover>
      </div>
    </div>
    <!-- <van-divider /> -->
    <div class="second">
      <div class="money">
        <div class="hh">我的余额</div>
        <br />
        <div class="number">847347.89</div>
      </div>
      <div class="yongjing">
        <div class="hh">当前佣金</div>
        <br />
        <div class="number">0.00</div>
      </div>
      <div class="youhuiquan">
        <div class="hh">优惠券</div>
        <br />
        <div class="number">0</div>
      </div>
    </div>
    <van-divider />
    <div class="three">
      <van-cell title="快速选择" is-link value="全部订单" />
      <div class="tag1">
        <van-grid :column-num="5">
          <van-grid-item
            v-for="(grid1, index) in grid1"
            :key="index"
            :icon="grid1.icon"
            :text="grid1.text"
            :badge="grid1.badge"
          />
        </van-grid>
      </div>
    </div>
    <van-divider />
    <van-cell title="我的服务" />
    <div class="tag2">
      <van-grid>
        <van-grid-item
          v-for="(grid2, index) in grid2"
          :key="index"
          :icon="grid2.icon"
          :text="grid2.text"
          :to="grid2.to"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        {
          text: "退出登录",
          icon: "close",
        },
      ],
      images: [
        {
          url: "https://s2.loli.net/2022/06/25/aDgNCX3FqVBckoI.jpg",
          title: "头像",
          preview: "1",
        },
      ],
      grid1: [
        {
          icon: "paid",
          text: "待付款",
          badge: "1",
        },
        {
          icon: "free-postage",
          text: "待发货",
          badge: "7",
        },
        {
          icon: "bag-o",
          text: "待收货",
          badge: "45",
        },
        {
          icon: "edit",
          text: "待评价",
          badge: "9",
        },
        {
          icon: "phone-circle-o",
          text: "售后/退款",
          badge: "50",
        },
      ],
      grid2: [
        {
          icon: "vip-card",
          text: "会员中心",
        },
        {
          icon: "gold-coin",
          text: "砍价记录",
        },
        {
          icon: "friends",
          text: "我的推广",
        },
        {
          icon: "card",
          text: "我的余额",
        },
        {
          icon: "location",
          text: "地址信息",
          to: "/mine/addressList",
        },
        {
          icon: "like",
          text: "我的收藏",
        },
        {
          icon: "gift-card",
          text: "优惠券",
        },
        {
          icon: "phone",
          text: "联系客服",
        },
      ],
    };
  },
  methods: {
    onSelect() {
      return this.$router.push('/');
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.zhanghao {
  display: flex;
  /* height: 120px; */
  padding: 5% 0;
  background-color: chocolate;
  justify-content: space-between;
}
.space {
  width: 5%;
}
.top {
  /* width: 30%; */
  /* height: 100px; */
  /* display: flex; */
  justify-items: flex-start;
}
.name {
  width: 65%;
  margin-left: 20px;
  justify-items: center;
}
.one {
  margin-top: 5px;
  font-size: 30px;
  text-align: left;
}
.two {
  margin-top: 5px;
  font-size: 25px;
  text-align: left;
}
.set {
  margin-top: 15px;
  width: 10%;
  margin-right: 10px;
  justify-items: flex-end;
}
.hh {
  color: #949494;
}
.second {
  margin-left: 10%;
  margin-top: 20px;
  width: 80%;
  height: 60px;
  /* margin: auto; */
  display: flex;
  justify-content: space-between;
}
.money {
  justify-items: flex-start;
  text-align: center;
}
.yongjing {
  justify-items: center;
  text-align: center;
}
.youhuiquan {
  justify-items: flex-end;
  text-align: center;
}
.bottom {
  width: 100%;
  height: 40px;
}
</style>